<template>
    <div class="tab-pane-wrapper" v-loading.fullscreen.lock="fullscreenLoading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="search">
            <el-form class="form-search" :model="form" inline>
                <el-form-item label="测点">
                    <el-select style="width: 110px" clearable v-model="form.pointName" placeholder="请选择" @change="handleCedianSelect">
                        <el-option v-for="(item, idx) in pointList" :label="item.label" :value="item.value" :key="idx">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="桥臂" v-if="showQiaobi">
                    <el-select style="width: 110px" clearable v-model="form.bridgeName" placeholder="请选择">
                        <el-option v-for="item in bridgeList" :label="item" :value="item" :key="item">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="时间">
                    <el-date-picker style="width: 420px" v-model="form.date" start-placeholder="开始日期"
                        end-placeholder="结束日期" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss" :unlink-panels="true" :clearable="false">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <label class="btn-nav-bg stripe-btn" @click="getInit(true)">查 询</label>
                </el-form-item>
            </el-form>
        </div>
        <div class="sec-content">
            <div class="middle">
                <div class="middle_title">
                    <img src="@/assets/images/sec-icon.png" alt="">
                    正极换流阀数据列表
                </div>
                <div class="table_box">
                    <page-table :tableData="listDataZheng" :tableLabel="colSData" :showIndex="true"
                        :pager="pagerSelfZheng" :table-height="tableHeight" @handleSizeChange="handleSizeChange"
                        @handleCurrentChange="handleCurrentChange"></page-table>
                </div>
                <div class="middle_title">
                    <img src="@/assets/images/sec-icon.png" alt="">
                    正极换流阀趋势图
                </div>
                <linebar style="width: 100%; height: 300px" :grid="grid" legendLeft="80%" :rotate="-15"
                    :axisLabelColor="'rgba(198,211,236)'" :datas="chartDataZheng.data" :xAxis="chartDataZheng.xAxis"
                    :isShowTooltip="true"></linebar>
            </div>
            <div class="middle">
                <div class="middle_title">
                    <img src="@/assets/images/sec-icon.png" alt="">
                    负极换流阀数据列表
                </div>
                <div class="table_box">
                    <page-table :tableData="listDataFu" :tableLabel="colSData" :showIndex="true" :pager="pagerSelfFu"
                        :table-height="tableHeight" @handleSizeChange="handleSizeChangeFu"
                        @handleCurrentChange="handleCurrentChangeFu"></page-table>
                </div>
                <div class="middle_title">
                    <img src="@/assets/images/sec-icon.png" alt="">
                    负极换流阀趋势图
                </div>
                <linebar style="width: 100%; height: 300px" :grid="grid" legendLeft="80%" :rotate="-15"
                    :axisLabelColor="'rgba(198,211,236)'" :datas="chartDataFu.data" :xAxis="chartDataFu.xAxis"
                    :isShowTooltip="true"></linebar>
            </div>
        </div>
    </div>
</template>
<script>
import PageTable from "@/components/PageTable";
import Linebar from "@/components/Linebar.vue";
import { huanliufa, bridgeList, zimukuai, listDataCesi } from '@/assets/data';
import {
    postZdyjHistoryKbHsyPage
} from '../api';
import { getZdyjSelectedDw } from "@/api/api";



export default {
    name: "history",
    props: {

    },
    components: {
        PageTable,
        Linebar
    },
    data() {
        return {
            showQiaobi: false, // 桥臂是否显示
            fullscreenLoading: false,
            listDataZheng: [],
            listDataFu: [],
            pagerSelfZheng: {
                pageSize: 10, // 每页数据量
                currentPage: 1, // 分页  当前页
                total: 0, //列表总数
            }, // 分页数据
            pagerSelfFu: {
                pageSize: 10, // 每页数据量
                currentPage: 1, // 分页  当前页
                total: 0, //列表总数
            }, // 分页数据
            form: {
                pointName: "",
                date: [
                    this.$moment()
                        .subtract(29, "days")
                        .startOf("day")
                        .format("YYYY-MM-DD HH:mm:ss"),
                    this.$moment()
                        .subtract(0, "days")
                        .endOf("day")
                        .format("YYYY-MM-DD HH:mm:ss"),
                ],
                bridgeName: '', //桥臂

            },
            colSData: [
                { label: "换流阀", param: "controlName" },
                { label: "桥臂", param: "bridgeName" },
                { label: "监测点", param: "pointName" },
                { label: "数值", param: "value" },
                { label: "上送时间", param: "time" },
            ],
            tableHeight: 300,


            valueList: [], //换流阀数据
            bridgeList: [], //桥臂数据
            modelList: [], // 子模块
            pointList: [], //测点数据
            grid: {
                containLabel: true,
                left: "2%",
                top: "24",
                right: "12%",
                bottom: "10%",
            }, // 图形数据
            chartDataZheng: {
                data: [
                    {
                        type: "line",
                        name: "",
                        color: "#5087ec",
                        showSymbol: true,
                        smooth: true,
                        data: [],
                    },
                ],
                xAxis: [],
                dataZoom: [
                    {
                        show: true,
                        height: 12,
                        xAxisIndex: [0],
                        bottom: 10,
                        left: 80,
                        right: 80,
                        start: 0,
                        end: 50,
                        handleIcon:
                            "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
                        handleSize: "110%",
                        handleStyle: { color: "#d3dee5" },
                        textStyle: { color: "#fff" },
                        borderColor: "#90979c",
                    },
                    {
                        type: "inside",
                        show: true,
                        height: 15,
                        start: 1,
                        end: 35,
                    },
                ],
            }, // 图形数据
            chartDataFu: {
                data: [
                    {
                        type: "line",
                        name: "",
                        color: "#5087ec",
                        showSymbol: true,
                        smooth: true,
                        data: [],
                    },
                ],
                xAxis: [],
                dataZoom: [
                    {
                        show: true,
                        height: 12,
                        xAxisIndex: [0],
                        bottom: 10,
                        left: 80,
                        right: 80,
                        start: 0,
                        end: 50,
                        handleIcon:
                            "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
                        handleSize: "110%",
                        handleStyle: { color: "#d3dee5" },
                        textStyle: { color: "#fff" },
                        borderColor: "#90979c",
                    },
                    {
                        type: "inside",
                        show: true,
                        height: 15,
                        start: 1,
                        end: 35,
                    },
                ],
            }, // 图形数据

            waveFormData: {}, // 保存点击数据
        };
    },
    watch: {
        'listDataZheng': {
            handler(newVal, oldVal) {
                this.chartDataZheng.data[0].data = newVal.map(item => item.value).reverse();
                this.chartDataZheng.xAxis = newVal.map(item => item.time).reverse();
            },
            deep: true,
            immediate: true,

        },
        'listDataFu': {
            handler(newVal, oldVal) {
                this.chartDataFu.data[0].data = newVal.map(item => item.value).reverse();
                this.chartDataFu.xAxis = newVal.map(item => item.time).reverse();
            },
            deep: true,
            immediate: true,
        }
    },
    mounted() {
        // 获取换流阀数据
        this.valueList = huanliufa;
        // 桥臂
        this.bridgeList = bridgeList;
        this.form.bridgeName = this.bridgeList[0];
        // 子模块
        this.modelList = zimukuai;
        this.calcHeight();
        this.getXjMeasureListData()
    },
    methods: {
        // 测点选择
        handleCedianSelect(value, data) {
            const arr = this.pointList.filter(item => item.value === value);
            console.log(arr)
            if (arr.length > 0 && arr[0].live === "换流阀端") {
                this.showQiaobi = false;
                this.form.bridgeName = '';
            }else{
                this.showQiaobi = true;
                this.form.bridgeName = this.bridgeList[0];
            }
        },
        calcHeight() {
            this.tableHeight = window.innerHeight - 730;
        },
        // 测点
        async getXjMeasureListData() {
            this.fullscreenLoading = true;
            let result = await getZdyjSelectedDw(this.$route.query.site);
            if (result.code == 200) {
                this.pointList = result.data;

                try {
                    if (result.data.length > 0) {
                        this.form.pointName = result.data[0].value;
                        this.getInit();
                    }
                } catch (err) {
                    throw new Error(err);
                }
            }
            this.fullscreenLoading = false;
        },
        handleSizeChange(val) {
            this.pagerSelfZheng.pageSize = val;
            this.getInit();
        },
        handleCurrentChange(val) {
            this.pagerSelfZheng.currentPage = val;
            this.getInit();
        },
        handleSizeChangeFu(val) {
            this.pagerSelfFu.pageSize = val;
            this.getInit();
        },
        handleCurrentChangeFu(val) {
            this.pagerSelfFu.currentPage = val;
            this.getInit();
        },
        // 获取初始数据
        getInit(flag) {
            if (flag) this.pagerSelfZheng.currentPage = 1;
            if (flag) this.pagerSelfFu.currentPage = 1;
            if (this.form.date) {
                let params = {
                    bridgeName: this.form.bridgeName,
                    pointName: this.form.pointName,
                    startTime: this.form.date[0],
                    endTime: this.form.date[1],
                    locationName: this.$route.query.site,
                }
                this.getXJHistoryData(params, '正极');
                this.getXJHistoryData(params, '负极');
            } else {
                alert('请选择日期')
            }

        },
        // 获取列表数据
        getXJHistoryData(params, type) {
            this.fullscreenLoading = true;
            const newParams = JSON.parse(JSON.stringify(params))
            newParams.electrodeName = type;
            if (type === '正极') {
                newParams.currentPage = this.pagerSelfZheng.currentPage;
                newParams.size = this.pagerSelfZheng.pageSize;
            } else {
                newParams.currentPage = this.pagerSelfFu.currentPage;
                newParams.size = this.pagerSelfFu.pageSize;

            }
            postZdyjHistoryKbHsyPage(newParams).then((res) => {
                this.fullscreenLoading = false;
                if (res.code == 200) {
                    if (type === '正极') {
                        this.listDataZheng = res.data.records;
                        this.pagerSelfZheng.total = Number(res.data.total);
                    } else {
                        this.listDataFu = res.data.records;
                        this.pagerSelfFu.total = Number(res.data.total);
                    }
                }
            });
        },
    },


};
</script>

<style lang="less">
.radio-box.form-search.cur-page {
    .el-radio-group {
        padding: 0 10px !important;
    }

    .el-radio {
        &:not(:last-child) {
            margin-right: 10px;
        }
    }
}
</style>
<style scoped lang="less">
.tab-pane-wrapper {
    width: 100%;
    height: 100%;

    .search {
        display: flex;
        justify-content: space-between;

        .radio-box {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .el-radio-group {
                width: auto;
                padding: 0 20px;
            }
        }
    }

    .sec-content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: calc(100% - 55px);
        margin-top: 10px;

        .middle {
            flex: 1;
            border: 1px solid #006686;
            padding: 0 30px;

            .middle_title {
                height: 40px;
                display: flex;
                align-items: center;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                font-size: 18px;
                color: #FFFFFF;

                img {
                    height: 20px;
                    width: 30px;
                    margin-right: 10px;
                }
            }
        }
    }

    ::v-deep(.sec-wrapper) {
        width: calc(50% - 8px);
        height: 100%;

        &:last-child {
            margin-left: 16px;
        }

        h3 {
            line-height: 30px;
            color: #28e9f2;
        }

        p {
            border: 1px solid #3099d1;
            background: rgba(48, 153, 209, 0.2);
            padding: 5px 15px 5px 0;
            color: #ffffff;
            line-height: 30px;
        }

        .scroll {
            height: calc(100% - 25px);
            width: 100%;
            overflow-y: auto;
            box-sizing: border-box;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            &.dialog-scroll {
                display: block;
                height: calc(100% - 70px);

                .item {
                    width: 100%;

                    p {
                        height: auto;
                        border: 0px;
                        background: transparent;
                    }
                }
            }

            // 里面的每一条
            .item {
                cursor: pointer;
                //height: 64px;
                width: 49%;
                box-sizing: border-box;
                border: 1px solid #006686;
                margin-bottom: 10px;
                padding: 0 10px;

                p {
                    line-height: 32px;
                    height: 32px;
                    color: #ffffff;
                }

                .tip {
                    line-height: 32px;
                    height: 32px;
                    display: flex;
                    justify-content: space-between;

                    span {
                        color: #eee;
                        font-size: 12px;
                    }
                }
            }
        }

        .chart-box {}
    }
}

.table_box {
    .table_title {
        height: 50px;
        display: flex;
        align-items: center;

        img {
            width: 30px;
            height: 20px;
        }
    }
}
</style>
